﻿@using KC.MVC.Core.Constants
@using KC.Web.Account.Constants
@using Microsoft.AspNetCore.Authorization
@inject IAuthorizationService AuthorizationService
@model KC.DTO.Account.RoleDTO
@{
    ViewBag.Title = "角色详情";
    Layout = "~/Views/Shared/_ListLayout.cshtml";
    var rId = ViewBag.roleId;
}
<style>
    #tblUser tr td:nth-child(odd) {
        font-weight: bold;
    }

    #tblUser tr td:nth-child(even) {
        /*background-color: #fff;*/
        font-size: 14px;
    }
</style>

<div class="easyui-layout" style="width:100%;height:100%;">
    <div data-options="region:'north',collapsed:false" style="height:30px;">
        <table id="tblUser" style="width:100%;padding:0px 360px;">
            <tr>
                <td>角色名：</td>
                <td>@Model.RoleName</td>
                <td>角色显示名：</td>
                <td>@Model.DisplayName</td>
            </tr>
        </table>
    </div>
    <div data-options="region:'west',split:false,collapsed:false" title="角色下的权限" style="width: 300px;">
        <table id="dgMenu"></table>
    </div>
    <div data-options="region:'center',split:false,collapsed:false" title="角色下的用户">
        <table id="dgUser"></table>
    </div>

</div>

@section scripts
    {
    <script type="text/javascript">
        $(function () {
            InitDataGrid();

            InitTreeGrid();
        });
        var userData = '@ViewBag.Users'.replace(new RegExp('&quot;', "gm"),'"');
        function InitDataGrid() {
            var data = JSON.parse(userData);
            var $dataGrid = $('#dgUser').datagrid({
                method: 'POST',
                idField: 'UserId',
                striped: true,
                fitColumns: true,
                rownumbers: true,
                singleSelect: true,
                pagination: false,
                nowrap: false,
                fit: true,
                showFooter: false,
                data: data,
                columns: [[
                    { field: 'MemberId', title: '用户编号', width: 80, align: 'left' },
                    { field: 'UserName', title: '用户名', width: 80, align: 'left' },
                    { field: 'DisplayName', title: '姓名', width: 100, align: 'left' },
                    { field: 'Email', title: '邮箱', width: 120, align: 'left' },
                    { field: 'PhoneNumber', title: '手机号', width: 80, align: 'left' },
                    { field: 'Telephone', title: '座机号', width: 50, align: 'left' },
                    {
                        field: 'OrganizationNames', title: '所属部门', width: 80, align: 'left',
                        formatter: function (value, row, index) {
                            if (value != undefined && value != "") {
                                return value.substr(0, value.length - 1);
                            }
                            return value;
                        }
                    },
                    { field: 'PositionLevelName', title: '部门岗位', width: 60, align: 'left' },
                    { field: 'Stat', title: '状态', width: 60,
                        formatter: function (value, row, index) {
                            if (value == "1") {
                                return "<span style='color:rgb(255, 0, 0);'>已冻结</span>";
                            }
                            return "<span style='color:rgb(0, 0, 255);'>已激活</span>";
                        }
                    }
                ]],
                onLoadSuccess: function (data) {
                    $('#dgUser').datagrid('fixRowHeight')
                },
                onLoadError: function () {
                }
            });
        }

        var menuData = '@ViewBag.Menus'.replace(new RegExp('&quot;', "gm"),'"');
        function InitTreeGrid() {
            var data = JSON.parse(menuData);
            var $dataTreeGrid = $('#dgMenu').tree({
                idField: 'id',
                treeField: 'text',
                striped: true,
                pagination: false,
                fitColumns: false,
                rownumbers: true,
                singleSelect: true,
                nowrap: false,
                fit: true,
                lines: true,
                showFooter: false,
                checkbox: false,
                checkOnSelect: false,
                cascadeCheck: false,
                data: data,
                columns: [[
                        { field: 'text', title: '名称', width: '34%', align: 'left' },
                        { field: 'Level', title: '等级', width: '19%', align: 'left' },
                        { field: 'Description', title: '描述', width: '45%', align: 'left' }
                    ]],
                onBeforeLoad: function (row, param) {
                },
                onLoadSuccess: function (row, data) {
                    $('#dgMenu').tree('expandAll');
                }
            });
        }
    </script>
}
